<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<fieldset id="app">
			<legend><h2>app实例</h2></legend>
			<child1></child1>
			<child2></child2>
		</fieldset>
		
		<template id="child1">
			<fieldset>
				<legend><h2>child1</h2></legend>
				<button type="button" @click="toC2" >向child2传值</button>
			</fieldset>
		</template>
		<template id="child2">
			<fieldset>
				<legend><h2>child2</h2></legend>
				<p>{{msg}}</p>
			</fieldset>
		</template>
		
		<script type="text/javascript">
			/* 需要在同一实例下，并且作用域必须包括监听与发送 */
			let childVue = new Vue()
			let child1={
				template:'#child1',
				data(){
					return {
						msg:"hello my name is child1"
					}
				},
				methods:{
					toC2(){
						childVue.$emit("c2_event",this.msg)							//2、触发监听
					}
				}
			}
			let child2={
				template:'#child2',
				data(){
					return {
						msg:"hello my name is child2",
					}
				},
				//created()是组件的生命周期函数，该函数会在组件实例创建完毕之后自动触发
				created(){
																				//1、设置监听
					//$on('要监听的事件名'，'监听到之后的回调函数')
					childVue.$on("c2_event",v=>{
						this.msg=v
					})
				}
			}
			new Vue({
				el:"#app",
				data:{
					zjz:'未接收'
				},
				components:{
					child1,
					child2
				}
			})
		</script>
	</body>
</html>
